<template>
	<view class='page_cont'>
		<view class='left_wrap'>
			<view class="item" @click="clean_up()" v-if="status==1">全部</view>
			<view class='item' :class="classify_index==index?'active':''" v-for="(item,index) in classifys" :key="index" @click="check_classify(index)">{{item.name}}</view>
			<view class="item" :class="classify_index==2?'active':''" @click="check_else_classify()">课程顾问</view>
		</view>
		<scroll-view class='right_wrap' scroll-y="true" scroll-with-animation="true">
			<view class="item" :class="cate_index==index?'active':''" v-for="(item,index) in cates" :key="index" @click="check_cate(index,item.id,item.name)">
				{{item.name}}
				<image class='icon' src="/static/icon8.png" v-if="cate_index==index"></image>
			</view>
		</scroll-view>
		<scroll-view class='right_wrap' scroll-y="true" scroll-with-animation="true" v-if="classify_index==0">
			<view class="item" :class="child_index==index?'active':''" v-for="(item,index) in childs" :key="index" @click="check_child(index,item.id,item.name)">
				{{item.name}}
				<image class='icon' src="/static/icon8.png" v-if="child_index==index"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import home from "../../api/home.js"
	export default{
		data(){
			return {
				status: '',
				classifys: [],
				classify_index: 0,
				cates: [],
				cate_id: '',
				cate_index: -1,
				cate_name: '',
				left_cates: ['',''],
				childs: [],
				child_id: '',
				child_index: -1
			}
		},
		onLoad(options) {
			this.classify_index=Number(options.range)-1;
			this.cate_id=options.id;
			this.child_id=options.child_id;
			if(options.status){
				this.status=options.status
			}
			//
			this.get_classify_list()
		},
		methods:{
			// 全部（即清除）
			clean_up(){
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.isRange=1
				prevPage.$vm.positionId=-1;
				prevPage.$vm.job_name='';
				prevPage.$vm.positionChildId=-1;
				prevPage.$vm.positionChildName='';
				prevPage.$vm.screening=true;
				if(this.classify_index<2){
					this.classifys[this.classify_index].left_index=-1;
				}
				this.child_id=-1;
				uni.navigateBack({
					delta: 1
				})
			},
			// 左
			check_classify(index){
				this.classify_index=index;
				this.cates=this.left_cates[index];
				this.cate_index=this.classifys[index].left_index;
				if(index==1){
					this.get_cate_list(this.classifys[index].id)
				}
			},
			check_else_classify(){
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.isRange=3
				prevPage.$vm.positionId=0;
				prevPage.$vm.job_name='课程顾问';
				prevPage.$vm.positionChildId=-1;
				prevPage.$vm.positionChildName='';
				prevPage.$vm.screening=true;
				if(this.classify_index<2){
					this.classifys[this.classify_index].left_index=-1;
				}
				this.child_id=-1;
				uni.navigateBack({
					delta: 1
				})
			},
			// 中
			check_cate(index,id,name){
				var type=this.cate_index==index?2:1;
				this.cate_index=index;
				this.cate_id=id;
				this.cate_name=name;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.isRange=type==1?Number(this.classify_index)+1:1;
				//
				if(this.classify_index==1){
					prevPage.$vm.positionId=type==1?id:-1;
					prevPage.$vm.job_name=type==1?name:'';
					prevPage.$vm.positionChildId=-1;
					prevPage.$vm.positionChildName='';
					prevPage.$vm.screening=true;
					this.classifys[0].left_index=-1;
					this.child_id=-1;
					uni.navigateBack({
						delta: 1
					})
				}else{
					this.classifys[1].left_index=-1;
					if(type==1){
						this.child_id=-1;
						this.child_index=this.cates[index].right_index;
						this.get_cate_list(id)
					}
				}
			},
			// 右
			check_child(index,id,name){
				var type=this.child_index==index?2:1;
				this.child_index=index;
				this.child_id=id;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.positionId=type==1?this.cate_id:-1;
				prevPage.$vm.job_name=type==1?this.cate_name:'';
				prevPage.$vm.positionChildId=type==1?id:-1;
				prevPage.$vm.positionChildName=type==1?name:'';
				prevPage.$vm.screening=true;
				//
				uni.navigateBack({
					delta: 1
				})
			},
			// 大分类
			get_classify_list(){
				uni.showLoading({})
				home.get_classify_list().then(res=>{
					uni.hideLoading()
					var list=res.data.data;
					this.classifys.push({name:"兴趣教育",left_index: -1})
					list.forEach((item,i)=>{
						if(item.name=="学科辅导"){
							var data=list.splice(i,1)[0];
							data.left_index=-1
							this.classifys.push(data)
							if(this.classify_index==1){
								this.get_cate_list(data.id)
							}
						}
						if(item.name=="附近机构"){
							list.splice(i,1)
						}
					})
					this.left_cates[0]=list;
					if(this.classify_index==0){
						this.cates=list;
						list.forEach((item,index)=>{
							item.right_index=-1;
							if(item.id==this.cate_id){
								this.classifys[0].left_index=index;
								this.cate_index=index;
								this.cate_name=item.name
								this.get_cate_list(this.cate_id)
							}
						})
					}
				})
			},
			// 小分类
			get_cate_list(id){
				var params={
					"parentId": id,
					"flagEnable": 1
				}
				home.get_cate_list(params).then(res=>{
					var list=res.data.data;
					if(this.classify_index==1){
						this.left_cates[1]=list;
						this.cates=list;
						list.forEach((item,index)=>{
							if(item.id==this.cate_id){
								this.classifys[1].left_index=index;
								this.cate_index=index;
							}
						})
					}else{
						this.childs=list;
						list.forEach((item,index)=>{
							if(item.id==this.child_id){
								this.child_index=index;
								this.cates[this.cate_index].right_index=index;
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page_cont{
		width: 100%;
		display: flex;
		flex-direction: row;
		.left_wrap{
			width: 184rpx;
			height: 100vh;
			background: #fff;
			.item{
				width: 100%;
				height: 106rpx;
				text-align: center;
				line-height: 106rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #3F4A58;
			}
			.active{
				color: #5B90FF;
				background: #F7F9FB;
			}
		}
		.right_wrap{
			flex: 1;
			height: 100vh;
			background: #F7F9FB;
			.item{
				width: 100%;
				height: 106rpx;
				text-align: center;
				line-height: 106rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #798594;
				position: relative;
				.icon{
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					width: 42rpx;
					height: 43rpx;
				}
			}
			.active{
				color: #5B90FF;
				background: #fff;
			}
		}
	}
</style>
